<template>
  <div>
    <h2>v-once</h2>
    <h2>h2: {{ counter }}</h2>
    <h3 v-once>h3: {{ counter }}</h3>
    <button @click="increment">+1</button>
    <hr />
    <h2>v-text指令</h2>
    <div>v-text指令: <span v-text="message"></span></div>
    <hr />
    <h2>v-html指令</h2>
    <div>v-html指令: <span v-html="htmlStr"></span></div>
    <p>
      v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出,
      一般v-text和插值语法相似
      <a href="https://blog.csdn.net/fushan2012/article/details/123067394"
        >https://blog.csdn.net/fushan2012/article/details/123067394</a
      >
    </p>
    <hr />
    <h2>v-pre指令</h2>
    <div v-pre>{{ message }}</div>
    <hr />
    <h2>v-cloak</h2>
    <div v-cloak>{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'page-day2',
  data() {
    return {
      counter: 100,
      message: 'Hello Vue.js 2',
      htmlStr: '<span style="color: red">红色</span>'
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
</style>
